import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const Suan = () => {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [gender, setGender] = useState("男");
  const [birthYear, setBirthYear] = useState("1990");
  const [birthMonth, setBirthMonth] = useState("7");
  const [birthDay, setBirthDay] = useState("1");
  const [birthHour, setBirthHour] = useState("时辰未知");
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const years = Array.from({ length: 126 }, (_, i) => (1900 + i).toString());
  const months = Array.from({ length: 12 }, (_, i) => (i + 1).toString());
  const days = Array.from({ length: 31 }, (_, i) => (i + 1).toString());
  const hours = [
    "时辰未知",
    "00:00-00:59(子时)",
    "01:00-01:59(丑时)",
    "02:00-02:59(丑时)",
    "03:00-03:59(寅时)",
    "04:00-04:59(寅时)",
    "05:00-05:59(卯时)",
    "06:00-06:59(卯时)",
    "07:00-07:59(辰时)",
    "08:00-08:59(辰时)",
    "09:00-09:59(巳时)",
    "10:00-10:59(巳时)",
    "11:00-11:59(午时)",
    "12:00-12:59(午时)",
    "13:00-13:59(未时)",
    "14:00-14:59(未时)",
    "15:00-15:59(申时)",
    "16:00-16:59(申时)",
    "17:00-17:59(酉时)",
    "18:00-18:59(酉时)",
    "19:00-19:59(戌时)",
    "20:00-20:59(戌时)",
    "21:00-21:59(亥时)",
    "22:00-22:59(亥时)",
    "23:00-23:59(子时)",
  ];

  const handleSubmit = () => {
    if (!name) {
      alert("请输入姓名！");
      return;
    }
    if (!birthYear || !birthMonth || !birthDay) {
      alert("请选择完整的生辰信息！");
      return;
    }
    setShowConfirmModal(true);
  };

  const handleConfirm = () => {
    setIsLoading(true);
    setTimeout(() => {
      navigate("/result", {
        state: { name, gender, birthYear, birthMonth, birthDay, birthHour, type: "predict" },
      });
    }, 1000);
  };

  const handleCancel = () => {
    setShowConfirmModal(false);
    setIsLoading(false);
  };

  return (
    <div
      style={{
        backgroundColor: "#f1c588",
        width: "600px",
        margin: "0 auto",
        height: "100vh",
        overflow: "hidden",
        position: "relative",
      }}
    >
      <img
        style={{
          width: "100%",
          height: "100%",
          objectFit: "cover",
          position: "absolute",
          top: 0,
          left: 0,
          zIndex: 1,
        }}
        src="https://zx.tengzhihh.com/bdshengchenyunshi/static/bg.f57a80ca.jpg"
        alt="背景图"
      />
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          width: "80%",
          backgroundColor: "#fff5e1",
          border: "4px solid #b22222",
          borderRadius: "10px",
          padding: "20px",
          zIndex: 2,
          boxShadow: "0 4px 10px rgba(0, 0, 0, 0.2)",
        }}
      >
        <div
          style={{
            backgroundColor: "#b22222",
            color: "#fff",
            fontSize: "24px",
            fontWeight: "bold",
            textAlign: "center",
            padding: "10px 0",
            borderRadius: "5px",
            marginBottom: "20px",
          }}
        >
          请输入个人信息
        </div>
        <div style={{ marginBottom: "20px" }}>
          <label
            style={{
              display: "block",
              fontSize: "18px",
              color: "#333",
              marginBottom: "10px",
            }}
          >
            姓名：
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="请输入姓名"
              style={{
                width: "100%",
                padding: "8px",
                fontSize: "16px",
                border: "1px solid #ccc",
                borderRadius: "5px",
              }}
            />
          </label>
        </div>
        <div style={{ marginBottom: "20px" }}>
          <label
            style={{
              display: "block",
              fontSize: "18px",
              color: "333",
              marginBottom: "10px",
            }}
          >
            性别：
            <span
              style={{
                margin: "0 10px",
                padding: "5px 10px",
                backgroundColor: gender === "男" ? "#ffaa00" : "#fff",
                border: "1px solid #ccc",
                borderRadius: "5px",
                cursor: "pointer",
              }}
              onClick={() => setGender("男")}
            >
              男
            </span>
            <span
              style={{
                padding: "5px 10px",
                backgroundColor: gender === "女" ? "#ffaa00" : "#fff",
                border: "1px solid #ccc",
                borderRadius: "5px",
                cursor: "pointer",
              }}
              onClick={() => setGender("女")}
            >
              女
            </span>
          </label>
        </div>
        <div style={{ marginBottom: "20px" }}>
          <label
            style={{
              display: "block",
              fontSize: "18px",
              color: "#333",
              marginBottom: "10px",
            }}
          >
            生辰：
            <div style={{ display: "flex", gap: "10px", marginBottom: "10px" }}>
              <select
                value={birthYear}
                onChange={(e) => setBirthYear(e.target.value)}
                style={{
                  padding: "8px",
                  fontSize: "16px",
                  border: "1px solid #ccc",
                  borderRadius: "5px",
                  flex: 1,
                }}
              >
                {years.map((year) => (
                  <option key={year} value={year}>
                    {year}
                  </option>
                ))}
              </select>
              <select
                value={birthMonth}
                onChange={(e) => setBirthMonth(e.target.value)}
                style={{
                  padding: "8px",
                  fontSize: "16px",
                  border: "1px solid #ccc",
                  borderRadius: "5px",
                  flex: 1,
                }}
              >
                {months.map((month) => (
                  <option key={month} value={month}>
                    {month}
                  </option>
                ))}
              </select>
              <select
                value={birthDay}
                onChange={(e) => setBirthDay(e.target.value)}
                style={{
                  padding: "8px",
                  fontSize: "16px",
                  border: "1px solid #ccc",
                  borderRadius: "5px",
                  flex: 1,
                }}
              >
                {days.map((day) => (
                  <option key={day} value={day}>
                    {day}
                  </option>
                ))}
              </select>
            </div>
            <select
              value={birthHour}
              onChange={(e) => setBirthHour(e.target.value)}
              style={{
                width: "100%",
                padding: "8px",
                fontSize: "16px",
                border: "1px solid #ccc",
                borderRadius: "5px",
              }}
            >
              {hours.map((hour) => (
                <option key={hour} value={hour}>
                  {hour}
                </option>
              ))}
            </select>
          </label>
        </div>
        <button
          onClick={handleSubmit}
          style={{
            width: "100%",
            padding: "10px",
            backgroundColor: "#ffaa00",
            color: "#fff",
            fontSize: "20px",
            fontWeight: "bold",
            border: "none",
            borderRadius: "10px",
            cursor: "pointer",
          }}
        >
          立即测算
        </button>
      </div>
      {showConfirmModal && (
        <div
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            zIndex: 1000,
          }}
        >
          <div
            style={{
              width: "80%",
              backgroundColor: "#fff5e1",
              border: "4px solid #b22222",
              borderRadius: "10px",
              padding: "20px",
              boxShadow: "0 4px 10px rgba(0, 0, 0, 0.2)",
              position: "relative",
            }}
          >
            <div style={{ marginBottom: "20px" }}>
              <label
                style={{
                  display: "block",
                  fontSize: "18px",
                  color: "#333",
                  marginBottom: "10px",
                }}
              >
                性别：
                <span
                  style={{
                    margin: "0 10px",
                    padding: "5px 10px",
                    backgroundColor: gender === "男" ? "#ffaa00" : "#fff",
                    border: "1px solid #ccc",
                    borderRadius: "5px",
                  }}
                >
                  男
                </span>
                <span
                  style={{
                    padding: "5px 10px",
                    backgroundColor: gender === "女" ? "#ffaa00" : "#fff",
                    border: "1px solid #ccc",
                    borderRadius: "5px",
                  }}
                >
                  女
                </span>
              </label>
            </div>
            <div style={{ marginBottom: "20px" }}>
              <label
                style={{
                  display: "block",
                  fontSize: "18px",
                  color: "#333",
                  marginBottom: "10px",
                }}
              >
                生辰：公历时间 {birthYear}年{birthMonth}月{birthDay}日 {birthHour}
              </label>
              <p style={{ fontSize: "14px", color: "#666", textAlign: "center" }}>
                正在加载中...
              </p>
            </div>
            <div style={{ display: "flex", gap: "10px", justifyContent: "center" }}>
              <button
                onClick={handleCancel}
                style={{
                  flex: 1,
                  padding: "10px",
                  backgroundColor: "#fff",
                  color: "#b22222",
                  fontSize: "16px",
                  border: "1px solid #b22222",
                  borderRadius: "5px",
                  cursor: "pointer",
                }}
              >
                取消
              </button>
              <button
                onClick={handleConfirm}
                disabled={isLoading}
                style={{
                  flex: 1,
                  padding: "10px",
                  backgroundColor: isLoading ? "#ccc" : "#b22222",
                  color: "#fff",
                  fontSize: "16px",
                  border: "none",
                  borderRadius: "5px",
                  cursor: isLoading ? "not-allowed" : "pointer",
                }}
              >
                好的
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Suan;